<template>
	<view class="header">
		<view class="header-item" v-for="(item,index) in headerTab" :key="item.id" @click="handleHeader(index)">
			<text :class="{active:queryParams.status==index}">{{item.title}}</text>
		</view>
		
	</view>
	<uni-empty v-if="emptyState"></uni-empty>
	<view class="coupon" v-for="(item,index) in couponList" :key="index">
		<image class="pic" src="../../static/coupon.png" mode=""></image>
		<image src="/static/ygq.png" class="status" v-if="queryParams.status==2" mode=""></image>
		<image src="/static/ysy.png" class="status" v-if="queryParams.status==1" mode=""></image>
		<view class="content">
			<view class="left" v-if="item.couponType==0">
				<text class="unit">￥</text>
				<text class="amount">{{item.preAmount/100}}</text>
			</view>
			<view class="left" v-if="item.couponType==1">
				
				<text class="amount">{{item.discountValue}}</text>
				<text class="unit">折</text>
			</view>
			<view class="right">
				<text class="title">{{item.couponName}}</text>
				<text class="time">{{item.createdTime}}</text>
			</view>
		</view>
	</view>
	
</template>

<script setup>
import {
		ref
	} from 'vue';
	import {
		getMemberCoupon
	} from '@/api'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {wxOpenid} from '@/utils/login-sdk.js'
	
	const emptyState = ref(false)
	const headerTab = ref([{
			title: "未使用",
			id: "header-1"
		},
		{
			title: "已使用",
			id: "header-2"
		},
		{
			title: "已过期",
			id: "header-3"
		},
	])
	const couponList = ref()
	const queryParams = ref({
		page:1,
		pageSize:10,
		businessType:"",
		status:0,
		memberId:""
	})
	onLoad(()=>{
		getData()
	})
	onReachBottom(()=>{
		queryParams.value.page++
		getData()
	})
	/** 获取优惠券 */
	const getData = async()=>{
		const {memberId} =await wxOpenid()
		queryParams.value.memberId = memberId
		const res = await getMemberCoupon(queryParams.value)
		
		if(queryParams.value.page==1){
			couponList.value = res.result.list
		}else{
			couponList.value = couponList.value.concat(res.result.list)
		}
		if(couponList.value.length){
			emptyState.value = false
		}else{
			emptyState.value = true
		}
	}
	/** 点击header*/
	const handleHeader = (index) => {
		queryParams.value.page=1
		queryParams.value.status = index
		getData()
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}
	.header {
		height: 82rpx;
		position: static;
		padding: 0 57rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.header-item {
			height: 82rpx;
	
			text {
				color: #8D8D8D;
				font-size: 32rpx;
				display: block;
				margin-top: 20rpx;
			}
			.active{
				color:	#16191B;			
			}
	
			.active::after {
				content: "";
				display: block;
				width: 54rpx;
				height: 7rpx;
				background: #FE9B23;
				border-radius: 4rpx;
				margin: 10rpx auto 0;
	
			}
	
		}
	
	}
	.coupon{
			width: 702rpx;
			height: 220rpx;
			
			border-radius: 36rpx;
			position: relative;
			margin: 30rpx auto;
			position: relative;
			.status{
				width: 151rpx;
				height: 119rpx;
				position: absolute;
				right: 22rpx;
				bottom: 23rpx;
			}
			.pic{
				position: absolute;
				width: 702rpx;
				height: 220rpx;
			}
			.content{
				position: relative;
				display: flex;
				.left{
					width: 165rpx;
					height: 220rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.unit{
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						
						margin-top: 10rpx;
					}
					.amount{
						font-weight: bold;
						font-size: 50rpx;
						color: #FFFFFF;
						
					}
				}
				.right{
					width: 560rpx;
					.title{
						display: block;
						margin-left: 44rpx;
						margin-top: 47rpx;
						font-size: 30rpx;
						color: #16191B;
					}
					.time{
						display: block;
						margin-left: 44rpx;
						font-size: 24rpx;
						margin-top: 70rpx;
						color: #ADADAD;
					}
				}
			}
		}
	
</style>